<template>
  <div class="evaluationInfo_container">
    <el-card class="box-card" shadow="always" style="background: #fafafa">
      <template #header>
        <div class="card-header" style="padding-bottom: 4px">
          <span>基本信息</span>
        </div>
      </template>
      <div>
        <el-form
          ref="elderFormRef"
          :model="form"
          :rules="rules"
          label-width="110px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="客户姓名:"
                prop="applyId"
                style="font-weight: 700"
              >
                <el-select
                  v-model="form.applyId"
                  clearable
                  filterable
                  placeholder="请选择客户姓名"
                  @change="changePeole"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in applyPeople"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  >
                    <span>{{ dict.nameAndIdCard }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别:" style="font-weight: 700">
                <span style="margin-left: 10px; font-weight: 400">
                  {{
                    sys_user_sex.find((item) => item.value == form.sex)
                      ? sys_user_sex.find((item) => item.value == form.sex)
                          .label
                      : ""
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄:" style="font-weight: 700">
                <span style="font-weight: 500">{{ form.age }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号码:" prop="telephone">
                <el-input
                  v-model="form.telephone"
                  placeholder="请输入手机号码"
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="服务地址:" style="font-weight: 700">
                <el-select
                  v-model="form.livingAddrProvinceId"
                  placeholder="选择省"
                  style="width: 180px"
                  @change="changelivingProvince"
                >
                  <el-option
                    v-for="dict in livingRegionList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.areaCode"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="form.livingAddrCityId"
                  placeholder="选择市"
                  style="width: 180px; margin-left: 5px"
                  @change="changelivingCity"
                >
                  <el-option
                    v-for="dict in livingCityList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.areaCode"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="form.livingAddrCountyId"
                  placeholder="选择区/县"
                  style="width: 180px; margin-left: 5px"
                  @change="changelivingCounty"
                >
                  <el-option
                    v-for="dict in livingCountyList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.areaCode"
                  ></el-option>
                </el-select>

                <el-select
                  v-model="form.livingAddrStreetId"
                  placeholder="选择乡村街道"
                  style="width: 180px; margin-left: 5px"
                  @change="changelivingStreet"
                >
                  <el-option
                    v-for="dict in livingStreetList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.areaCode"
                  ></el-option>
                </el-select>

                <el-select
                  v-model="form.livingAddrCommunityId"
                  placeholder="选择乡村社区"
                  style="width: 250px; margin-left: 5px"
                  @change="changelivingCommunity"
                >
                  <el-option
                    v-for="dict in livingAddrCommunity"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.areaCode"
                  ></el-option>
                </el-select>
                <el-input
                  v-model="form.livingDetailAddress"
                  style="width: 450px; margin-left: 10px"
                  placeholder="请输入家庭详细地址"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card" shadow="always" style="background: #fafafa">
      <template #header>
        <div class="card-header" style="padding-bottom: 4px">
          <span>基本信息</span>
        </div>
      </template>
      <div>
        <el-form
          ref="elderFormRef"
          :model="form"
          :rules="rules"
          label-width="110px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户姓名:" style="font-weight: 700">
                <span style="font-weight: 500">{{ form.age }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别:" style="font-weight: 700">
                <span style="font-weight: 500">{{ form.age }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄:" style="font-weight: 700">
                <span style="font-weight: 500">{{ form.age }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话:" style="font-weight: 700">
                <span style="font-weight: 500">{{ form.age }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="服务地址:" style="font-weight: 700">
                <span style="font-weight: 500">{{ form.age }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务状态:" style="font-weight: 700">
                <span style="font-weight: 500">{{ form.age }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下单时间:" style="font-weight: 700">
                <span style="font-weight: 500">{{ form.age }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工单编号:" style="font-weight: 700">
                <span style="font-weight: 500">{{ form.age }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card
      class="box-card"
      shadow="always"
      style="background: #fafafa; margin-top: 20px"
    >
      <template #header>
        <div class="card-header" style="padding-bottom: 4px">
          <div
            class="card-header"
            style="
              padding-bottom: 4px;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <span>服务项目</span>
          </div>
        </div>
      </template>
      <div>
        <el-table
          v-loading="loading"
          :data="servicePlanList"
          stripe
          border
          max-height="250"
        >
          <el-table-column label="服务项目" align="center" width="300">
            <template #default="scope">
              <el-select
                v-model="scope.row.serviceItemId"
                clearable
                @change="
                  (value) => changeServiceName(value, scope.$index, scope.row)
                "
                placeholder="请选择服务项目"
                style="width: 250px"
              >
                <el-option
                  v-for="dict in serviceList"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="单价（元）"
            align="center"
            prop="unitPrice"
            width="100"
          />
          <el-table-column label="单位" align="center" width="100">
            <template #default="scope">
              <span>
                {{
                  bed_uint.find((item) => item.value == scope.row.unit)
                    ? bed_uint.find((item) => item.value == scope.row.unit)
                        .label
                    : ""
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="社区站点佣金（元）"
            width="160"
            align="center"
            prop="commission"
          ></el-table-column>
          <el-table-column label="计划开始时间" align="center" width="260">
            <template #default="scope">
              <el-date-picker
                v-model="value1"
                type="datetime"
                placeholder="请选择计划开始时间"
                format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
              />
              {{ value1 }}
            </template>
          </el-table-column>
          <el-table-column label="计划结束时间" align="center" width="260">
            <template #default="scope">
              <el-date-picker
                v-model="value2"
                type="datetime"
                placeholder="请选择计划结束时间"
                format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
              />
              {{ value2 }}
            </template>
          </el-table-column>
          <el-table-column label="服务方" align="center" width="550">
            <template #default="scope">
              <span>
                <el-select
                  v-model="scope.row.serviceItemId"
                  clearable
                  @change="
                    (value) => changeServiceName(value, scope.$index, scope.row)
                  "
                  placeholder="请选择社区站点"
                  style="width: 250px"
                >
                  <el-option
                    v-for="dict in serviceList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  ></el-option>
                </el-select>
              </span>
              <span style="margin-left: 10px">
                <el-select
                  v-model="scope.row.serviceItemId"
                  clearable
                  @change="
                    (value) => changeServiceName(value, scope.$index, scope.row)
                  "
                  placeholder="请选择站点人员"
                  style="width: 250px"
                >
                  <el-option
                    v-for="dict in serviceList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  ></el-option>
                </el-select>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="合计金额（元）"
            prop="unitPrice"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card
      class="box-card"
      shadow="always"
      style="background: #fafafa; margin-top: 15px"
    >
      <div style="text-align: right; padding-right: 50px">
        <el-button type="primary" style="margin-left: 20px">确 定</el-button>
        <el-button>取 消</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { debounce } from '@/utils/debounce.js';

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
import { getServiceItemSelectOptions, listAll } from '@/api/homebedsign/index';
import { elderArchiveinfo, region } from '@/api/record/api';
const { bed_uint, service_frequency, sys_user_sex } = proxy.useDict(
  'bed_uint',
  'service_frequency',
  'sys_user_sex',
)

const serviceList = ref([])
const servicePlanList = ref([
  {
    serviceItemId: '',
  },
])
const loading = ref(false)
const open = ref(false)
const postList = ref([])

const status = ref('');
const applyPeople = ref([])
const regionList = ref([])
const livingRegionList = ref([])
const livingCityList = ref([])
const livingCountyList = ref([])
const livingStreetList = ref([])
const livingAddrCommunity = ref([])
const value1 = ref('');
const value2 = ref('');
// const disabledDate = (time) => {
//   const tomorrow = new Date();
//   tomorrow.setDate(tomorrow.getDate() + 1); // 明天的日期
//   const selectedDate = new Date(time);
//   return selectedDate < tomorrow; // 如果选择的日期在明天之前，返回 true，表示不可选
// }

const data = reactive({
  form: {},
  rules: {},
})
const { form, rules } = toRefs(data)

function getOrdPeople() {
  listAll().then((res) => {
    applyPeople.value = res.eaList
  });
}
async function changePeole(val) {
  form.value.applyName = applyPeople.value.find((item) => item.id == val)?.name
  const data = await elderArchiveinfo(val)
  const data4 = await region(data.elderArchiveDTO.livingAddrProvinceId)
  const data5 = await region(data.elderArchiveDTO.livingAddrCityId)
  const data6 = await region(data.elderArchiveDTO.livingAddrCountyId)
  const data7 = await region(data.elderArchiveDTO.livingAddrStreetId)
  livingCityList.value = data4.data
  livingCountyList.value = data5.data
  livingStreetList.value = data6.data
  livingAddrCommunity.value = data7.data
  form.value.telephone = data.elderArchiveDTO.telephone
  form.value.sex = data.elderArchiveDTO.sex

  form.value.age = data.elderArchiveDTO.age
  form.value.livingAddrProvinceId = data.elderArchiveDTO.livingAddrProvinceId
  form.value.livingAddrProvinceName =
    data.elderArchiveDTO.livingAddrProvinceName

  form.value.livingAddrCityId = data.elderArchiveDTO.livingAddrCityId
  form.value.livingAddrCityName = data.elderArchiveDTO.livingAddrCityName

  form.value.livingAddrCountyId = data.elderArchiveDTO.livingAddrCountyId
  form.value.livingAddrCountyName = data.elderArchiveDTO.livingAddrCountyName
  form.value.livingAddrStreetId = data.elderArchiveDTO.livingAddrStreetId
  form.value.livingAddrStreetName = data.elderArchiveDTO.livingAddrStreetName
  form.value.livingAddrCommunityId = data.elderArchiveDTO.livingAddrCommunityId
  form.value.livingAddrCommunityName =
    data.elderArchiveDTO.livingAddrCommunityName
  form.value.livingDetailAddress = data.elderArchiveDTO.livingDetailAddress
}
function changelivingProvince(val) {
  form.value.livingAddrProvinceName = livingRegionList.value.find(
    (item) => item.areaCode == val,
  )?.name
  livingCityList.value = []
  form.value.livingAddrCityId = '';
  form.value.livingAddrCountyId = '';
  form.value.livingAddrStreetId = '';
  form.value.livingAddrCommunityId = '';
  livingCountyList.value = []
  livingStreetList.value = []
  region(val).then((res) => {
    livingCityList.value = res.data
  });
}
function changelivingCity(val) {
  form.value.livingAddrCityName = livingCityList.value.find(
    (item) => item.areaCode == val,
  )?.name
  form.value.livingAddrCountyId = '';
  form.value.livingAddrStreetId = '';
  form.value.livingAddrCommunityId = '';
  livingCountyList.value = []
  livingStreetList.value = []
  region(val).then((res) => {
    livingCountyList.value = res.data
  });
}
function changelivingCounty(val) {
  form.value.livingAddrCountyName = livingCountyList.value.find(
    (item) => item.areaCode == val,
  )?.name
  form.value.livingAddrStreetId = '';
  form.value.livingAddrCommunityId = '';
  livingStreetList.value = []

  region(val).then((res) => {
    livingStreetList.value = res.data
  });
}
function changelivingStreet(val) {
  form.value.livingAddrStreetName = livingStreetList.value.find(
    (item) => item.areaCode == val,
  )?.name
  livingAddrCommunity.value = []
  form.value.livingAddrCommunityId = '';
  region(val).then((res) => {
    livingAddrCommunity.value = res.data
  });
}
function changelivingCommunity(val) {
  form.value.livingAddrCommunityName = livingAddrCommunity.value.find(
    (item) => item.areaCode == val,
  )?.name
}
function getregion() {
  region(0).then((res) => {
    regionList.value = res.data
    livingRegionList.value = res.data
  });
}
getregion()
getOrdPeople()
function changeServiceName(val, index, data) {
  data.commission = serviceList.value.find(
    (item) => item.id == val,
  )?.commission
  data.unitPrice = serviceList.value.find((item) => item.id == val)?.unitPrice
  data.unit = serviceList.value.find((item) => item.id == val)?.unit
  data.serviceItemName = serviceList.value.find((item) => item.id == val)?.name
}
function getServiceItemSelectOptionsData() {
  getServiceItemSelectOptions().then((res) => {
    serviceList.value = res.serviceItemList
  });
}
const stopWatch = watch(
  () => route,
  (newVal, oldVal) => {},
  { immediate: true },
)
getServiceItemSelectOptionsData()
onBeforeUnmount(() => {
  stopWatch()
});
</script>
<style scoped lang="scss">
.evaluationInfo_container {
  padding: 20px;
}
</style>
